<template>
  <div class="add-or-edit">
    <el-card>
      <el-form
        :model="menuForm"
        :rules="rules"
        ref="menuForm"
        label-width="100px"
        class="demo-menuForm"
      >
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="menuForm.name"></el-input>
        </el-form-item>
        <el-form-item label="菜单路径" prop="href">
          <el-input v-model="menuForm.href"></el-input>
        </el-form-item>
        <el-form-item label="上级菜单" prop="parentId">
          <el-select v-model="menuForm.parentId">
            <el-option label="无上级菜单" :value="-1"></el-option>
            <el-option
              v-for="menu in topMenu"
              :key="menu.id"
              :label="menu.name"
              :value="menu.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="menuForm.description"></el-input>
        </el-form-item>
        <el-form-item label="前端图标" prop="icon">
          <el-input v-model="menuForm.icon"></el-input>
        </el-form-item>
        <el-form-item label="是否显示" prop="shown">
          <el-radio-group v-model="menuForm.shown">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序" prop="orderNum">
          <el-input type="number" v-model="menuForm.orderNum"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('menuForm')"
            >提交</el-button
          >
          <el-button @click="resetForm('menuForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getMenuList, getMenuById, addOrUpdateMenu } from '@/service/menu'
export default {
  name: 'AddOrEdit',
  data () {
    return {
      menuForm: {
        name: '',
        href: '',
        parentId: -1,
        description: '',
        icon: '',
        shown: false,
        orderNum: ''
      },
      // 一级菜单
      topMenu: [],
      rules: {
        name: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' },
          {
            min: 2,
            max: 140,
            message: '长度在 2 到 140 个字符',
            trigger: 'blur'
          }
        ],
        description: [
          { required: true, message: '请输入菜单描述', trigger: 'blur' },
          {
            min: 2,
            max: 140,
            message: '长度在 2 到 140 个字符',
            trigger: 'blur'
          }
        ],
        icon: [
          { required: true, message: '请输入菜单图标', trigger: 'blur' },
          {
            min: 2,
            max: 140,
            message: '长度在 2 到 140 个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created () {
    this.loadMenu()
    this.loadMenuById()
  },
  methods: {
    async loadMenu () {
      const { data } = await getMenuList()
      if (data.code === '000000') {
        this.topMenu = data.data.filter(m => m.level === 0)
        // console.log(this.topMenu)
      }
    },
    async loadMenuById () {
      const id = this.$route.params.id
      if (!id) return
      const { data } = await getMenuById(id)
      if (data.code === '000000') {
        for (const key in this.menuForm) {
          this.menuForm[key] = data.data[key]
        }

        // console.log(this.topMenu)
      }
    },
    async submitForm (formName) {
      try {
        const result = await this.$refs[formName].validate()
        if (result) {
          this.$confirm('即将提交填写内容, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info'
          }).then(async () => {
            const { data } = await addOrUpdateMenu(this.menuForm)
            if (data.code === '000000') {
              this.$message.success('提交成功')
              this.$router.push({ name: 'menu' })
            }
          })
        }
      } catch (error) {
        console.log(error, '验证失败')
      }
    },
    resetForm (formName) {
      this.$confirm('即将重置填写内容, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$refs[formName].resetFields()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item {
  text-align: left;
}
</style>
